<template>
  <div>
    <a-modal
      width="40%"
      v-model="modal2Visible"
      title="保修单处理"
      centered
      @ok="onSubmit"
    >
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        label-align="left"
        :wrapper-col="wrapperCol"
      >
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="处理人" prop="updateBy">
              <a-input
                v-model="form.updateBy"
                placeholder="请填写处理人"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="填报日期" prop="date1">
              <a-date-picker
                v-model="form.startTime"
                show-time
                disabled
                type="date"
                placeholder="请填写填报日期"
                style="width: 100%;"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备名称">
              <a-select show-search
                        allowClear
                        disabled
                        option-filter-prop="children"
                        :filter-option="filterOption"
                        @focus="handleFocus"
                        @blur="handleBlur"
                        @change="handleChange" v-model="form.deviceId" placeholder="请填写巡检设备">
                <a-select-option v-for="(item,index) in list" :key="index" :value="item.id">{{ item.deviceName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备编号" prop="id	">
              <a-input
                disabled
                v-model="form.id"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="故障描述">
              <a-input disabled v-model="form.faultReason" type="textarea"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="处理方法" prop="handleWay">
              <a-input v-model="form.handleWay" type="textarea"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="处理结果" prop="handleResult">
              <a-radio-group v-model="form.handleResult">
                <a-radio value="0">未解决</a-radio>
                <a-radio value="1">已解决</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import {queryById, query, edit} from '@/api/device.js'

export default {
  data() {
    return {
      modal2Visible: false,
      labelCol: {span: 6},
      wrapperCol: {span: 15},
      other: '',
      list: [],
      form: {
        updateBy: '', // 填报人
        startTime: '',  //填报日期
        deviceId: '', // 设备名称
        id: '', //设备编号
        faultReason: '', // 故障描述
        handleWay: '', //处理方法
        handleResult: '' //处理结果
      },
      rules: {
        updateBy: [{required: true, message: '请填写填报人', trigger: 'blur'}],
        startTime: [{required: true, message: '请填写填报日期', trigger: 'blur'}],
        deviceId: [{required: true, message: '请填写设备名称', trigger: 'blur'}],
        id: [{required: true, message: '请填写设备编号', trigger: 'blur'}],
        faultReason: [{required: true, message: '请填写故障描述', trigger: 'blur'}],
        handleWay: [{required: true, message: '请填写处理方法', trigger: 'blur'}],
        handleResult: [{required: true, message: '请填写处理结果', trigger: 'blur'}],
      }
    }
  },
  methods: {
    init(id) {
      queryById(id).then(res => {
        console.log(res)
        this.form = res.result
      }).catch(err => {
      })
      query().then(res => {
        this.list = res.result
      }).catch(err => {
      })
    },
    setModal1Visible(modal1Visible) {
      this.modal1Visible = modal1Visible
    },
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          edit(this.form).then(res => {
            this.$message.success('填报成功');
            this.modal2Visible = false
            this.$parent.dataList(1,10)
          }).catch(err => {

          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    handleBlur() {
      console.log('blur');
    },
    handleFocus() {
      console.log('focus');
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  }
}
</script>
